<script lang="ts" setup>
import { useRouter } from 'vue-router'
import type { FormInstance } from 'ant-design-vue'
import { Form, message } from 'ant-design-vue'
import myLoading from '@/components/loadingIcon/myLoading.vue'
import { setLocalStorage } from '@/assets/utils/utils'

const indicator = h(myLoading)
const formInputLayout = {
  labelCol: { offset: 0 },
  wrapperCol: { offset: 1, span: 40 }
}

interface loginFormType {
  userName: string
  password: string
}

const formRef = ref<FormInstance>()
const loginFormState: loginFormType = reactive({
  userName: 'admin',
  password: '123456'
})
let showLoading = ref<boolean>(false)
const router = useRouter()

const rules = reactive({
  userName: [{ required: true, message: '请输入管理员账号' }],
  password: [{ required: true, message: '请输入账号密码' }]
})
const useForm = Form.useForm
const { validate } = useForm(loginFormState, rules)
// 校验是否输入账号密码
const handle_login = async () => {
  showLoading.value = true
  try {
    await validate()
    setTimeout(async () => {
      showLoading.value = false
      setLocalStorage('token', '123')

      if (
        loginFormState.userName === 'admin' &&
        loginFormState.password === '123456'
      ) {
        setLocalStorage('role', 'manager')
      } else {
        setLocalStorage('role', 'tourist')
      }

      router.replace({ path: '/home/statistic' })
    }, 2000)
  } catch (error) {
    message.error({
      content: '请输入正确账号和密码',
      style: { color: 'red' }
    })
  } finally {
    showLoading.value = false
  }
}
</script>

<template>
  <a-spin
    :indicator="indicator"
    :spinning="showLoading"
    size="large"
  >
    <div class="login-bg slide-bottom flex-column align-center">
      <div class="title">欢迎来到Games Mall的后台</div>
      <div
        id="login-box"
        class="login-box relative flex-column justify-center align-center"
      >
        <a-form
          ref="formRef"
          :model="loginFormState"
          autocomplete="on"
          name="login"
        >
          <a-form-item
            label="账号"
            name="userName"
            v-bind="formInputLayout"
          >
            <a-input v-model:value="loginFormState.userName" />
          </a-form-item>
          <a-form-item
            label="密码"
            name="password"
            v-bind="formInputLayout"
          >
            <a-input-password v-model:value="loginFormState.password" />
          </a-form-item>
          <a-form-item
            :wrapper-col="{ offset: 1 }"
            class="mt-6"
          >
            <a-button
              shape="round"
              type="primary"
              @click="handle_login"
            >
              登录
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </a-spin>
</template>

<style lang="scss" scoped>
.login-bg {
  width: 100vw;
  height: 100vh;

  .title {
    width: 660px;
    color: #000000;
    font-size: 50px;
    font-weight: 600;
    margin: 0 auto;
    padding-left: 33px;
    transform: translateY(400px);
  }

  .login-box {
    width: 500px;
    height: 300px;
    border-radius: 20px;
    border: 1px solid #dddddd;
    margin: auto;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.35);
    font-weight: 600 !important;

    :deep(.ant-form-item-label) {
      & > label {
        font-size: 15px !important;
      }
    }

    :deep(.ant-form-item-control-input-content) {
      height: 40px;
      width: 260px;
    }

    :deep(.ant-btn) {
      height: 40px !important;
      width: 270px !important;
      font-size: 16px !important;
    }

    :deep(.ant-btn) {
      width: 200px;
    }
  }

  .login-box-fireFox {
    display: none;
  }
}
</style>
